Chakra UIを利用してカスタムコンポーネントを作ってみた

大高大輔

2022.12.13

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部サービスソリューション部の大高です。

Chakra UIにはReactで利用できる様々なUIコンポーネントが用意されていますが、既存のコンポーネントを少しカスタマイズしたり、利用方法に制約を加えたいことがあります。

実際に、Buttonコンポーネントをカスタマイズしたものを作成してみたので、対応方法についてまとめたいと思います。

単純にラップする

まずは単純にラップしたコンポーネントを作成してみます。

以下の公式ドキュメントを参考に対応をしていきましょう。

今回は「既存のButtonコンポーネントをカスタマイズしたものを作成したい」という点と、Buttonにrefが指定される可能性を考慮して、ドキュメントに記載のOption 1を参考に作成します。

import {
  Button as ChakraButton,
  ButtonProps as ChakraButtonProps,
  forwardRef,
} from '@chakra-ui/react'

export type ButtonProps = ChakraButtonProps
export const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
  return (
    <ChakraButton {...props} ref={ref}></ChakraButton>
  )
})

これは、ドキュメントとほぼ同じ感じですね。

スタイルを限定する

次に、更にスタイルを限定したボタンを作成してみます。

PrimaryButtonというコンポーネントとして、colorSchemeとvariantを限定（外部からは変更不可）なコンポーネントとしてみます。

export type PrimaryButtonProps = Omit<ButtonProps, keyof Pick<ButtonProps, 'colorScheme' | 'variant'>>
export const PrimaryButton = forwardRef<PrimaryButtonProps, 'button'>((props, ref) => {
  return (
    <Button {...props} colorScheme={'blue'} variant={'solid'} ref={ref}></Button>
  )
})

まずはPrimaryButtonPropsを定義します。ここではOmitを利用して、既存のButtonPropsからcolorSchemeとvariantを除去します。

次に、このPrimaryButtonPropsを利用してPrimaryButtonを定義することで、colorSchemeとvariantはプロパティとして指定できないコンポーネントとしました。

このButtonコンポーネントのスタイルはcolorScheme={'blue'} variant={'solid'}と明示的にプロパティ指定をしており、これによりスタイルが限定されています。